<!--
 作者 : 唐梓元
 日期 : 2019-6-26
 版本 : 1.0
 描述 :头部导航
 使用 : <cmHeader :searchShow="true"></cmHeader>
 参数 :searchShow 默认是'false'，值为FALSE的时候显示正常导航，搜索框隐藏
 -->


<template>
<div class='contentWrapper '>
     <div class='headerWrapper widthMin'>
       <div class='logo'><img src="../../assets/Home/c_ogo.png" alt="" class="logo1"> <img class="logo2" src="../../assets/Home/t.png" alt=""></div>
       <div class="qureywrapper " v-show='searchShow'>
           <ul>
               <li @click.stop="do_getSearchList" v-text='queryTarg'> </li>
               <li v-for="(item,index) in navSearchList" :key='index' v-text='item' v-show='getSearchList' @click='def_getTarget(item)'></li>
           </ul>
           <span class="input"><input type="text" placeholder="请输入你要搜索的内容" v-model="queryText"></span>
           <span class="icon f-zhong" @click="do_goSearch"><img src="../../assets/Home/sousuo.png" alt=""></span>
       </div>
       <div class="nav " v-show='!searchShow'>
           <ul >
               <li v-for="(item,index) in navLink" :key='index'><router-link v-text='item.name' :to="item.path" :class='item.activeClass' @click="goNav"> </router-link> </li>
           </ul>
       </div>
       <div class="login">
           <ul>
               <li ><span style="max-width: 135px;display: inline-block" class="overflow3" :title="getUserName" v-if="user.userName" v-text='user.userName' @click="def_goLogin('register')"></span> </li>
               <li><span v-text='user.goLogin' @click="def_goLogin('login')"> </span></li>
           </ul>
       </div>
   </div>
</div >

</template>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      getSearchList: false,
      queryTarg: '全文',
      user: {userName: '注册', goLogin: '登录'},
      queryText:'',
      navLink: [
        {name: '首页', path: '/BS_cgkHome', activeClass: ''},
        {name: '查询', path: '/yw_cgkQuery', activeClass: ''},
        {name: '收藏', path: '/yw_cgkCollect', activeClass: ''},
        {name: '分析', path: '/yw_cgkAnalyse', activeClass: ''},
        {name: '管理入口', path: '/yw_cgkManage', activeClass: ''}
      ],
      navSearchList: [] //导航下拉
    }
  },
  props: {
    searchShow: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: "0"
    }

  },
  methods: {
    do_goSearch(){
      // this.$router.push({name: 'bsApplyDetail', query: {resourceSN: this.resourceSN}})
      this.$router.push({name:'yw_cgkQuery',query:{condition:this.queryTarg,queryText:this.queryText}})
    },
    do_getSearchList() {
      let me = this;
      me.getSearchList = !me.getSearchList
    },
    do_getSearchList2() {
      let me = this;
      me.getSearchList = false
    },
    def_getTarget(item) {
      let me = this;
      me.queryTarg = item;
      me.getSearchList = !me.getSearchList
    },
    def_goLogin(item){
      if(item=='login'){
        if(this.user.goLogin=='登录'){
          localStorage.setItem("JumpKey", window.location.href);
          this.$router.push('/BS_cgkLogin')
        }else {
          this.$ZcPublic.needLogin=false
          localStorage.removeItem('userName')
          this.$store.commit('setUserName','')
          let me =this
          me.$ZcPublic.zcServer.Post({      //退出接口调用
            IsNeedLogin:'true',
            Paras:{
              Name: 'Vue_resultLib',
              Action: 'Ext_UserEnd_RS',
              Data:{}
            },
            Callback:me.cb_UserEnd_RS,
            Scope:me
          })
          me.reload()
        }

      }else if(item=='register'){
        if(this.user.userName=='注册'){
          localStorage.setItem("JumpKey", window.location.href);
          this.$router.push('BS_cgkRegist')
        }
      }

    },
    goNav(){

    },
    get_selectList(){
      let me = this;
      me.$ZcPublic.zcServer.Post({
        IsNeedLogin: 'false',
        Paras: {
          Name: 'Vue_resultLib',
          action: "getQueryTextModel_ResultShow",
          Data: {

          }
        },
        Callback:   me.cb_get_selectList,
        Scope: me,
      });
    },
    cb_get_selectList(resJson,scoped){
      console.log('下拉选择',resJson)
      if(resJson.success){
        this.navSearchList=resJson.data
        this.queryTarg=this.navSearchList[0]
      }else {
        // alert(resJson.msg)
      }
    },
    do_login(){

      let me=this
      me.$ZcPublic.zcServer.Post({
        IsNeedLogin: 'false',
        Paras: {
          Name: 'Vue_LoginResultLib',
          action: "Login",
          Data: {
            Password: localStorage.Password,
            UserCode: localStorage.UserCode,
            OrganCode: me.$ZcPublic.OrganCode
            // GB_OrganSN: me.$ZcPublic.GB_OrganSN
          }
        },
        Callback: me.cb_login,
        Scope: me,
      })
    },
    cb_login(resJson,scoped){
      console.log('自动登录返回',resJson)
      if(resJson.success){
        let _info=resJson.data
        let _userName = _info.Name.split('(')[0]
        let _telephone =  _info.Name.split('(')[1].split(')')[0]
        localStorage.setItem('userName',_userName)
        localStorage.setItem('telephone',_telephone)
        sessionStorage.setItem('isLogin', true)
        // this.$store.commit('setUserName',_userName)
        this.$store.dispatch('setUserName',_userName)

      }else {
        this.$confirm({
          type:'错误',
          msg:resJson.msg,
          btn:{
            ok:"yes"
          }
        })
      }
    },
    cb_UserEnd_RS(resJson,scoped){
      console.log('退出登录返回',resJson)
    }
  },
  created(){
    window.scrollTo(0,0);
// alert(localStorage.UserCode)
    if(localStorage.UserCode){
      if(this.$ZcPublic.needLogin){
        this.do_login() //自动登录
      }

    }else {
      if(sessionStorage.isLogin){
        if(localStorage.userName){

          this.user.userName=localStorage.userName
          this.user.goLogin='退出'
        }else {
          this.user.userName='注册'
          this.user.goLogin='登录'
        }
      }else {
        if(localStorage.userName){
          localStorage.removeItem("userName")
          this.user.userName='注册'
          this.user.goLogin='登录'
          this.$store.dispatch('setUserName','')

        }
      }
    }
    if(this.searchShow){
      this.get_selectList()
    }

  },
  mounted() {
      let index=parseInt(this.id)
      if(index>4){

      }else {
        this.navLink[index].activeClass = "isActive"
      }

  },
  computed:{
    getUserName(){
      if( this.$store.getters.getUserName){
        this.user.userName=this.$store.getters.getUserName
        this.user.goLogin='退出'
      }
      return this.$store.getters.getUserName
    }
  }
}
</script>
<style scoped>
  .widthMin{
    width: 1200PX;
  }
  .isNone{
    display: none
  }
  .contentWrapper{
    margin-top: 0;
    height: 70px;
    border-bottom: 1px solid gainsboro;
    box-shadow: 1px 2px 5px #c6c6c6;
    background-color: white;
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
  }
  .headerWrapper{
    margin: 0 auto;
    display: flex;
  }
  .headerWrapper .logo{
    width: 40%;
    display: flex
  }
  .headerWrapper .qureywrapper{
    flex:1;
    height:40px;
    line-height: 40px;
    border: 1px solid #418CFF;
    margin-top: 14px;
    position: relative;
    z-index: 5;

  }
  .login{
    flex: 0 0 200px;
  }
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .headerWrapper .qureywrapper *{
    float:left
  }
  .headerWrapper .qureywrapper ul{
    width: 105px;
    height: 38px;
    line-height: 38px;
    position: relative;
    z-index: 1;
    background-color: white;
    box-sizing: border-box;
  }
  .headerWrapper .qureywrapper ul:after{
    content: "";
    width: 1px;
    height: 25px;
    background-color: grey;
    position: absolute;
    right: 0px;
    top: 6px;
  }
  .headerWrapper .qureywrapper ul li{
    border: 1px solid gainsboro;
    box-sizing: border-box;
    height: 38px;
    line-height: 38px;
    position: relative;
    left: -1px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-top: none;
background-color: #fff;
    padding-right: 6px;
  }
  .headerWrapper .qureywrapper ul li:first-child{
    border: none;
    left:0px;
    border-bottom: 1px solid gainsboro;
    background: url('../../assets/Home/xiala.png') 90%  no-repeat ;
    background-size: 11px 8px;
    position: relative;
    z-index: 900;

  }
  .headerWrapper .qureywrapper ul li:nth-of-type(1){
    height: 39px;
    border-bottom: 1px solid #418CFF;
  }

  .headerWrapper .qureywrapper ul li:hover{
    background: #418EFD;
    color: white;
  }
  .headerWrapper .qureywrapper ul li:first-child:hover{
    border: none;
    left:0px;
    border-bottom: 1px solid #418CFF;
    background: url('../../assets/Home/xiala.png') 90%  no-repeat ;
    background-size: 11px 8px;
    position: relative;
    z-index: 999;
    color: black;
  }
  .headerWrapper .qureywrapper .input{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 105px;
    right: 50px;
  }
  .headerWrapper .qureywrapper .input input{
    width: 100%;
    height: 36px;
    display: inline-block;
    border: none;
    outline: none;
    padding-left: 11px;
  }
  .icon{
    width: 55px;
    position: absolute;
    right: 0;
    height: 38px;
    background: #418CFF;
    color: white;
    text-align: center;
    cursor: pointer;
  }
  .icon img{
    width: 23px;
    height: 23px;
  }
  .headerWrapper .logo .logo1{
    flex: 0 0 60px;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /*border:1px solid red;*/
    margin:5px 10px
  }
  .headerWrapper .logo .logo2{
    flex:1;
    height: 35px;

    /*border:1px solid red;*/
    margin:15px 18px
  }
  .login ul {
    display: flex;
    margin-top: 15px
  }
  .login ul li:first-child{
    flex:1;
    height:40px;
    line-height: 40px;
    text-align: right;
    padding-right: 10px
  }
  .login ul li:last-child{
    flex:0 0 50px;
    height:40px;
    line-height: 40px;
    text-align: left;
    padding-left: 10px;
    position: relative;
  }
  .login ul li:last-child:before{
    content:'';
    position: absolute;
    width: 1px;
    height: 20px;
    background: #c6c6c6;
    left: 0;
    top: 10px;
  }
  .login ul li span{
    cursor: pointer;
  }
  .login ul li span:hover{
    color:#418CFF ;
    text-decoration: underline;
  }
  .nav{
    flex:1
  }
  .nav ul {
    width: 100%;
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    text-align: center
  }
  .nav ul li{
    flex: 1
  }
  .nav ul li a{
    text-decoration: none;
    color: black;
  }
  .isActive{
    color: #418CFF !important;
    border-bottom: 2px solid #418CFF;
    padding-bottom: 2px;
  }
</style>
